<!-- 专家发布知识组件 -->
<template>
  <!-- 组件整体容器 -->
  <div class="publish-message">
    <!-- 知识发布表单，设置标签宽度，绑定表单数据 -->
    <el-form label-width="100px" :model="form" style="margin-top:50px;">
      <!-- 图片上传表单项 -->
      <el-form-item label="添加图片">
        <!-- 图片上传组件 -->
        <!-- 以卡片形式展示图片 -->
        <el-upload
            class="orders-img_el_upload"
            :action="upurl"
            :headers="upheaders"
            :limit="3"
            list-type="picture-card"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileList"
            :class="{ disUoloadSty: noneBtnImg }"
            ref="upload"
        >
          <!-- 上传图片按钮 -->
          <span class="orders-img_el_upload_btn" @click.stop="submitUpload">添加图片</span>
        </el-upload>
      </el-form-item>
      <!-- 知识标题表单项 -->
      <el-form-item label="标题">
        <!-- 输入框，双向绑定表单中的标题字段 -->
        <el-input v-model="form.title" placeholder="添加标题"></el-input>
      </el-form-item>
      <!-- 知识内容表单项 -->
      <el-form-item label="内容">
        <!-- 文本域输入框，双向绑定表单中的内容字段 -->
        <el-input type="textarea" v-model="form.content" placeholder="添加内容"></el-input>
      </el-form-item>
    </el-form>
    <!-- 按钮容器，水平居中显示 -->
    <div style="display:flex;justify-content:center;">
      <!-- 发布按钮，标题或内容为空时禁用，点击触发发布方法 -->
      <el-button type="success" :disabled="isDisabled" @click="publishClick">发布信息</el-button>
    </div>
  </div>
</template>

<script>
// 引入添加知识的 API
import {addKnowledge} from "@/api/knowledge";

export default {
  // 组件名称
  name: "PublishMessage",
  // 组件数据
  data() {
    return {
      dialogImageUrl: "", // 图片预览的 URL
      dialogVisible: false, // 图片预览对话框的显示状态
      showBtnImg: true, // 显示上传按钮的标识
      noneBtnImg: false, // 隐藏上传按钮的标识
      limitCountImg: 3, // 图片上传数量限制
      upurl: this.$store.state.fileUploadRoad + "/file/upload/order", // 图片上传接口地址
      upheaders: {
        Authorization: window.localStorage.token, // 图片上传请求头的认证信息
      },
      fileList: [], // 已上传的图片文件列表
      imgurl: "", // 图片地址
      form: {
        title: "", // 知识标题
        content: "", // 知识内容
        picPath: "" // 图片路径
      }
    };
  },
  // 组件接收的属性
  props: {
    ctype: {
      type: String, // 属性类型为字符串
    },
  },
  // 计算属性
  computed: {
    // 判断发布按钮是否禁用，标题或内容为空时禁用
    isDisabled() {
      return this.form.title === "" || this.form.content === ""
    },
    // 预留的计算属性，暂未实现具体逻辑
    isActive() {
    },
  },
  // 组件方法
  methods: {
    // 图片上传失败时的处理方法
    handleError(err, file, fileList) {
      this.$message({
        message: "上传失败！",
        type: "success", // 此处类型有误，建议改为 "error"
      });
      console.log(err);
    },
    // 图片上传成功时的处理方法
    handleSuccess(response, file, fileList) {
      if (file.response.flag === true) {
        this.fileList = fileList; // 更新图片文件列表
        this.form.picPath = file.response.data; // 更新表单中的图片路径
        if (fileList.length >= 3) {
          this.uploadDisabled = true; // 达到上传数量限制时禁用上传
        }
        alert(file.response.message);
      } else {
        alert(file.response.data);
      }
    },
    // 图片列表变化时的处理方法
    handleChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg; // 根据图片数量更新隐藏上传按钮的标识
    },
    // 移除图片时的处理方法
    handleRemove(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg; // 根据图片数量更新隐藏上传按钮的标识
      this.fileList.pop(); // 移除最后一张图片
      this.uploadDisabled = false; // 取消上传禁用状态
    },
    // 图片预览时的处理方法
    handlePreview(file) {
      this.dialogImageUrl = file.url; // 设置图片预览的 URL
      this.dialogVisible = true; // 显示图片预览对话框
    },
    // 提交图片上传的方法
    submitUpload() {
      this.$refs.upload.submit(); // 调用上传组件的提交方法
    },
    // 发布知识的方法
    publishClick() {
      // 调用添加知识的 API
      addKnowledge({
        title: this.form.title,
        content: this.form.content,
        picPath: this.form.picPath,
      })
          .then((res) => {
            if (res.flag === true) {
              alert(res.message);
              // 跳转到已发布知识页面
              this.$router.push("/home/user/published" + this.ctype);
            } else {
              alert(res.message);
            }
          })
          .catch((err) => {
            console.log("添加失败");
          });
    },
  },
};
</script>

<style lang="less" scoped>
/* 隐藏上传按钮的样式 */
.disUoloadSty .el-upload--picture-card {
  display: none; /* 隐藏上传按钮 */
}

/* 发布知识组件的整体样式 */
.publish-message {
  width: 1100px;
  margin: 20px auto;
  padding: 10px 20px;
  background: #fff;

  /* 图片上传区域样式 */

  .orders-img_el_upload {
    width: 1000px;
    height: 148px;

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: #409eff; /* 鼠标悬停时边框颜色变化 */
      }

      .el-upload__input {
        position: absolute;
        left: -1000px; /* 隐藏原生上传输入框 */
      }
    }
  }
}
</style>